<template>
    <div class="system-add-menu-container">
        <el-dialog title="新增菜单" v-model="isShowDialog" width="769px">
            <el-form :model="ruleForm" size="default" label-width="80px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="上级菜单">
                            <el-cascader :option="menuData" :props="{checkStrictly:true,value:'path',label:'title'}" placeholder="请选择上级菜单" clearable class="w100" v-model="ruleForm.menuSuperior">
                                <template #default="{node,data}">
                                    <span>{{data.title}}</span>
                                    <span v-if="!node.isLeaf">({{data.children.length}})</span>
                                </template>
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="菜单类型">
                            <el-radio-group v-model="ruleForm.menuType">
                                <el-radio label="menu">菜单</el-radio>
                                <el-radio label="btn">按钮</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="菜单名称">
                            <el-input v-model="ruleForm.meta.title" placeholder="格式：message.router.xx" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <template v-if="ruleForm.menuType === 'menu'">
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="路由名称">
                                <el-input v-model="ruleForm.name" placeholder="路由中的name值"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="路由路径">
                                <el-input v-model="ruleForm.path" placeholder="路由中的path值" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="重定向">
                                <el-input v-model="ruleForm.redirect" placeholder="请输入路由重定向" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="菜单图标">
                                <IconSelector placeholder="请选择菜单图标" v-model="ruleForm.meta.icon" type="all" />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="组件路径">
                                <el-input v-model="ruleForm.component" placeholder="组件路径" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="链接地址">
                                <el-input v-model="ruleForm.meta.isLink" pplaceholder="外链/内嵌时链接地址（http:xxx.com）" clearable :disabled="!ruleForm.isLink"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="权限标识">
                                <el-select v-model="ruleForm.meta.roles" multiple placeholder="请选择权限" clearable class="w100">
                                    <el-option label="admin" value="admin"></el-option>
                                    <el-option label="common" value="common"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </template>
                    <template v-if="ruleForm.menuType === 'btn'">
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="权限标识">
                                <el-input v-model="ruleForm.btnPower" placeholder="请输入权限标识" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </template>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="菜单排序">
                                <el-input-number v-model="ruleForm.menuSort" controls-position="right" placeholder="请输入排序" class="w100" />
                            </el-form-item>
                    </el-col>
                    <template v-if="ruleForm.menuType === 'menu'">
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="是否隐藏">
                                <el-radio-group v-model="ruleForm.meta.isHide">
                                    <el-radio :label="true">隐藏</el-radio>
                                    <el-radio :label="false">不隐藏</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="页面缓存">
                                <el-radio-group v-model="ruleForm.meta.isKeepAlive">
                                    <el-radio :label="true">缓存</el-radio>
                                    <el-radio :label="false">不缓存</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="是否固定">
                                <el-radio-group v-model="ruleForm.meta.isAffix">
                                    <el-radio :label="true">固定</el-radio>
                                    <el-radio :label="false">不固定</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>                       
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="是否外链">
                                <el-radio-group v-model="ruleForm.isLink" :disable="ruleForm.meta.isIframe">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="是否内嵌">
                                <el-radio-group v-model="ruleForm.meta.isIframe" @change="onSelectIframeCange">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </template>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">取消</el-button>
                    <el-button type="primary" @click="onSubmit" size="default">新增</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent,reactive,toRefs,onMounted } from 'vue';
import {useStore} from '/@/store/index';
import {i18n} from '/@/i18n/index';
import IconSelector from '/@/components/iconSelector/index.vue'

export default defineComponent({
    name:"systemAddMenu",
    components:{IconSelector},
    setup() {
        const store = useStore();
        const state = reactive({
            isShowDialog:false,
            ruleForm:{
                menuSuperior: [], // 上级菜单
				menuType: 'menu', // 菜单类型
				name: '', // 路由名称
				component: '', // 组件路径
				isLink: false, // 是否外链
				menuSort: 0, // 菜单排序
				path: '', // 路由路径
				redirect: '', // 路由重定向，有子集 children 时
				meta: {
					title: '', // 菜单名称
					icon: '', // 菜单图标
					isHide: false, // 是否隐藏
					isKeepAlive: true, // 是否缓存
					isAffix: false, // 是否固定
					isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
					isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
					roles: '', // 权限标识，取角色管理
				},
				btnPower: '', // 菜单类型为按钮时，权限标识
            },
            menuData:[]
        })
        // 获取vuex 中的路由
        const getMenuData  = (routes:any)=>{
            const arr:any =[]
            routes.map((val:any)=>{
                val['title'] = i18n.global.t(val.meta.title);
                val['id'] = Math.random();
                arr.push({...val});
                if(val.children) getMenuData(val.children);
            })
            return arr;
        }
        // 打开弹窗
        const openDialog = ()=>{
            state.isShowDialog = true
        }
        // 关闭弹窗
        const closeDialog = ()=>{
            state.isShowDialog = false
        }
        // 是否内嵌下拉改变
        const onSelectIframeCange =()=>{
            if(state.ruleForm.meta.isIframe) state.ruleForm.isLink = true;
            else state.ruleForm.isLink = false;
        }
        // 取消
        const onCancel = ()=>{
            closeDialog()
        }
        // 新增
        const onSubmit = ()=>{
            closeDialog()
        }
        // 页面加载时候
        onMounted(()=>{
           state.menuData = getMenuData(store.state.routesList.routesList)
        })
        return {
            openDialog,
            closeDialog,
            onSelectIframeCange,
            onCancel,
            onSubmit,
            ...toRefs(state)
        }
    },
})
</script>
